{% extends "volunteer/layout.html" %}

{% block volunteer_content %}
<div class="activities-content">
    <!-- Search and filter section -->
    <div class="filter-section">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search activities..." onkeyup="filterActivities()">
            <i class="fas fa-search"></i>
        </div>
        
        <div class="filters">
            <select id="locationFilter" onchange="filterActivities()">
                <option value="">All Locations</option>
                {% for location in locations %}
                <option value="{{ location }}">{{ location }}</option>
                {% endfor %}
            </select>

            <input type="date" id="dateFilter" onchange="filterActivities()">
            
            <button onclick="resetFilters()" class="btn-reset">
                <i class="fas fa-undo"></i> Reset Filters
            </button>
        </div>
    </div>

    <!-- Activities grid -->
    <div class="activities-grid">
        {% for activity in activities %}
        <div class="activity-card"
            data-location="{{ activity.location }}"
            data-date="{{ activity.start_time.strftime('%Y-%m-%d') }}"
            data-title="{{ activity.title }}">
            <div class="activity-status
                        {% if activity.registered_count >= activity.max_participants %}full
                        {% elif (activity.start_time - now).days <= 3 %}urgent
                        {% else %}open{% endif %}">
                {% if activity.registered_count >= activity.max_participants %}
                    Full
                {% elif (activity.start_time - now).days <= 3 %}
                    Starting Soon
                {% else %}
                    Open
                {% endif %}
            </div>
            
            <div class="activity-header">
                <h3>{{ activity.title }}</h3>
            </div>
            
            <div class="activity-info">
                <p><i class="fas fa-clock"></i> {{ activity.start_time.strftime('%Y-%m-%d %H:%M') }}</p>
                <p><i class="fas fa-map-marker-alt"></i> {{ activity.location }}</p>
                <p><i class="fas fa-users"></i> {{ activity.registered_count }}/{{ activity.max_participants }} Participants</p>
                <p><i class="fas fa-building"></i> {{ activity.charity_name }}</p>
            </div>
            
            <div class="activity-description">
                {{ activity.description[:100] }}{% if activity.description|length > 100 %}...{% endif %}
            </div>
            
            <div class="activity-footer">
                <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn-detail">View Details</a>
                {% if activity.registered_count < activity.max_participants %}
                <button onclick="registerActivity({{ activity.id }})" class="btn-register">Register Now</button>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="no-activities">
            <i class="fas fa-calendar-times"></i>
            <p>No activities found</p>
        </div>
        {% endfor %}
    </div>
</div>

<style>
.activities-content {
    padding: 20px;
}

.filter-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-box {
    position: relative;
    margin-bottom: 15px;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.filters select,
.filters input[type="date"] {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
}

.btn-reset {
    padding: 8px 15px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-reset:hover {
    background: #e9ecef;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.activity-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-5px);
}

.activity-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.activity-status.open {
    background: #28a745;
    color: white;
}

.activity-status.urgent {
    background: #ffc107;
    color: #000;
}

.activity-status.full {
    background: #dc3545;
    color: white;
}

.activity-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.activity-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
}

.activity-info {
    padding: 15px;
}

.activity-info p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.activity-info i {
    width: 20px;
    color: #3498db;
}

.activity-description {
    padding: 0 15px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.activity-footer {
    padding: 15px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.btn-detail,
.btn-register {
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    flex: 1;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.btn-detail {
    background: #f8f9fa;
    color: #2c3e50;
    border: 1px solid #ddd;
}

.btn-register {
    background: #3498db;
    color: white;
}

.btn-detail:hover {
    background: #e9ecef;
}

.btn-register:hover {
    background: #2980b9;
}

.no-activities {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    color: #666;
}

.no-activities i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ddd;
}

@media (max-width: 768px) {
    .filters {
        flex-direction: column;
    }
    
    .filters select,
    .filters input[type="date"] {
        width: 100%;
    }
    
    .activities-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
function filterActivities() {
    const searchText = document.getElementById('searchInput').value.toLowerCase();
    const location = document.getElementById('locationFilter').value;
    const date = document.getElementById('dateFilter').value;
    
    const cards = document.querySelectorAll('.activity-card');
    
    cards.forEach(card => {
        const cardTitle = card.getAttribute('data-title').toLowerCase();
        const cardLocation = card.getAttribute('data-location');
        const cardDate = card.getAttribute('data-date');
        
        const matchesSearch = cardTitle.includes(searchText);
        const matchesLocation = !location || cardLocation === location;
        const matchesDate = !date || cardDate === date;
        
        if (matchesSearch && matchesLocation && matchesDate) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
    });
}

function resetFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('locationFilter').value = '';
    document.getElementById('dateFilter').value = '';
    filterActivities();
}

function registerActivity(activityId) {
    if (confirm('Are you sure you want to register for this activity?')) {
        fetch(`/api/activities/${activityId}/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Registration successful!');
                location.reload();
            } else {
                alert(data.message || 'Registration failed. Please try again later.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Registration failed. Please try again later.');
        });
    }
}
</script>
{% endblock %} 